<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="刘艳超">
    <title>qq聊天框</title>
    <link rel="stylesheet" href="qq.css">
    <style>
        body{
            background-color: skyblue;

        }
      
        * {
            margin: 0;
            padding: 0;
        }
        
      
        
        #ul1 li img {
            width: 30px;
            height: 30px;
        }
        
        #ul1 a {
            max-width: 140px;
            padding: 3px;
            line-height: 18px;
            display: inline-block;
            border: 1px solid #999;
            border-radius: 5px;
            color: #000;
            word-break: break-all;
            text-align: left;
            box-shadow: 0 1px 2px #999;
            vertical-align: top;
        }
        
       
        
        .btn_add {
            width: 30px;
            height: 31px;
            background: url(3.png) no-repeat;
            background-position: 0 0;
        }
        
        .btn_face {
            width: 30px;
            height: 31px;
            background: url(5.png) no-repeat;
            background-position: 100% 0;
            margin-left: 6px;
        }
        
        form {
            width: 280px;
            height: 32px;
            float: right;
        }
        
    
    </style>
</head>

<body>
    <main>
    <div class="bgdiv" id='wrap' style="background:url(img_08.jpg) no-repeat;">
        <!--<div class="name">我最聪明</div>-->
        <ul id="ul1"></ul>
        <div class="btdiv">
            <div class="ipt">
                <div class="btns_1">
                    <a href="javascript:;" class="btn_face" id="btn3"></a>
                </div>
                <form>
                    <input type="text" id="ipt1" value="" />
                    
                    <input type="button" value="发送" id="btn1" />
                </form>
            </div>
            <ul id="face">
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>
                <li><img src="3.png" /></li>

            </ul>
            <div id="add"><img src="5.png" /></div>
        </div>
    </div>
    </main>
    <script src="qq.js"></script>

</body>

</html>